<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>
<body>
<div class="nav">五子棋对战</div>
<!-- 整个页面的容器元素 -->
<div class="container">
    <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
    <div>
        <!-- 展示用户信息 -->
        <div id="screen"></div>
        <!-- 匹配按钮 -->
        <div id="match-button">开始匹配</div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script>
    $.ajax({
        type:'get',
        url:'/userinfo',
        success:function (result){
            if(result && result.userId > 0){
                let screenShow = document.querySelector("#screen");
                screenShow.innerHTML = '玩家: ' + result.username + " 分数: " + result.score
                    + "<br> 比赛场次: " + result.totalCount + " 获胜场数: " + result.winCount;
            }
        },
        error:function (){
            alert("获取用户信息失败")
        }
    })
    let webSocketUrl = "ws://"+location.host+"/findMatch";
    let websocket = new WebSocket(webSocketUrl)

    websocket.onopen = function (){
        console.log("onopen")
    }

    websocket.onclose = function (){
        console.log("onclose")

    }

    websocket.onerror = function (){
        console.log("onerror")
    }
    // 监听页面关闭事件. 在页面关闭之前, 手动调用这里的 websocket 的 close 方法.
    window.onbeforeunload = function() {
        websocket.close();
    }
    //收到响应
    websocket.onmessage = function (e){
        let matchButton = document.querySelector("#match-button")
        let resp = JSON.parse(e.data)
        if(!resp.ok){
            console.log("游戏大厅中接收到了失败响应! " + resp.reason);
            return;
        }
        if(resp.message == "startMatch"){
            console.log("匹配请求发送成功")
            matchButton.innerHTML = "匹配中...(点击停止)"
        }else if (resp.message == 'stopMatch') {
            // 结束匹配请求发送成功
            console.log("离开匹配队列成功!");
            matchButton.innerHTML = '开始匹配';
        } else if (resp.message == 'matchSuccess') {
            // 已经匹配到对手了.
            console.log("匹配到对手! 进入游戏房间!");
            location.replace("game_room.html");
        }else if(resp.message == 'repeatConnection'){
            alert("不可重复登录此账号");
            location.href = 'login.html';
        }
        else{
            console.log("接收到异常响应" + resp.message)
        }

    }
    //添加点击事件
    let matchbutton = document.querySelector("#match-button")
    matchbutton.onclick = function (){
        //发送websocket
        if(websocket.readyState == websocket.OPEN){
            // 如果当前 readyState 处在 OPEN 状态, 说明连接好着的
            // 这里发送的数据有两种可能, 开始匹配/停止匹配
            if(matchbutton.innerHTML == "开始匹配"){
                console.log("开始匹配")
                websocket.send(JSON.stringify({
                    message:"startMatch",
                }));
            }else if(matchbutton.innerHTML == "匹配中...(点击停止)"){
                console.log("结束匹配")
                websocket.send(JSON.stringify({
                    message: 'stopMatch',
                }));
            }
        }else {
            alert("建立连接失败，请重新登录")
            location.href = "login.html"
        }
    }

</script>

</body>
</html>